<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .test {

            background-color: red;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid;
        }
    </style>
</head>

<body>
    <div id="box" class="test box"></div>
    <label for="">男</label>
    <input type="radio" name="gender" id="male" value="male">
    <label for="">女</label>
    <input type="radio" name="gender" id="female">

    <input type="text" value="初始值" class="text">

    猪脚饭<input type="checkbox" name="" id="" class="check">
    米饭<input type="checkbox" name="" id="">
    钵钵鸡<input type="checkbox" name="" id="">

    <button id="btn" disabled>按钮</button>
    <button id="btn">按钮</button>
    <button id="btn">按钮</button>


    <div></div>
    <div class="box">dsjkbfbdsb</div>
    <div></div>

    <script>

        //===== 属性操作 ====
        //----- 通过节点的属性操作元素属性
        //访问 eleNode.attr
        //设置 eleNode.attr=value
        //特殊情况：
        // class要换成className
        // for 要换成 htmlFor
        // 自定义属性  dataset.自定义属性

        let div = document.getElementById('box');
        let label = document.getElementsByTagName('label')[0];
        let btns = document.getElementsByTagName('button');
        let input = document.getElementsByClassName('text')[0];
        let check = document.getElementsByClassName('check')[0];
        let divs = document.getElementsByTagName('div');
        // console.dir(label);
        // console.log(div.className);//'test box'

        // div.title = '这是属性设置的方式'

        // label.htmlFor = 'male'

        // for (let i = 0; i < 3; i++) {
        //     btns[i].dataset.gender = i;
        // }

        // btns[0].dataset.id = 1;
        // btns[1].dataset.id = 2;
        // btns[2].dataset.id = 3;
        // console.log(btns[1].dataset.id);

        // check.checked = true;

        // btns[0].onclick = function () {
        //     btns[0].disabled = true;
        // }

        // console.log(divs);
        // console.log(divs[1].className);
        // divs[1].className += ' ' + 'test'


        //---- 通过方法操作元素
        //1.获取：eleNode.getAttribute(attr)
        //2.设置：eleNode.setAttribute(属性，属性值)
        //3.删除：eleNode.removeAttribute(attr)
        //4.检测是否含有某个属性： eleNode.hasAttribute(attr)

        console.log(input.getAttribute('type'));
        console.log(label.getAttribute('for'));

        div.setAttribute('title','这是通过方法设置的title属性')

        // div.removeAttribute('title')

        let boo=div.hasAttribute('title');
        console.log(boo);


        // 练习：抽奖，用户输入一二三等奖中奖人数



    </script>
</body>

</html>